<!DOCTYPE html>
<html>

<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="../../node_modules/jquery-colorbox/example1/colorbox.css" />
    <link rel="stylesheet" href="../../node_modules/swipebox/src/css/swipebox.min.css" />
    <link rel="stylesheet" href="../../dist/css/justifiedGallery.css" />
    <!-- endbower -->
</head>

<body>
    <h1>Big images test</h1>
    <p>
        With Chrome DevTools slow down connection. 
        The images provided in the data-safe-src should not be loaded (check in the network tab).
        Only after the layout is built by only considering the provided width and height, the correct thumbnail is loaded.
    </p>
    <div id="bigimages">
        <a href="../photos/8083451788_552becfbc7_b.jpg" title="What's your destination?">
            <img width="320" height="264" data-safe-src="../photos/8083451788_552becfbc7_t.jpg" />
        </a>
        <a href="../photos/7948632554_01f6ae6b6f_b.jpg" title="Just in a dream Place">
            <img width="320" height="213" data-safe-src="../photos/7948632554_01f6ae6b6f_t.jpg" />
        </a>
        <a href="../photos/7302459122_19fa1d8223_b.jpg" title="Truthful Innocence">
            <img width="320" height="213" data-safe-src="../photos/7302459122_19fa1d8223_t.jpg" />
        </a>
        <a href="../photos/7222046648_5bf70e893a_b.jpg" title="Simply my Brother">
            <img width="320" height="167" data-safe-src="../photos/7222046648_5bf70e893a_t.jpg" />
        </a>
        <a href="../photos/7002395006_29fdc85f7a_b.jpg" title="Freedom">
            <img width="320" height="176" data-safe-src="../photos/7002395006_29fdc85f7a_t.jpg" />
        </a>
        <a href="../photos/7062575651_b23918b11a_b.jpg" title="Maybe spring">
            <img width="320" height="176" data-safe-src="../photos/7062575651_b23918b11a_t.jpg" />
        </a>
    </div>
    
    <!-- bower:js -->
    <script src="../../node_modules/jquery/dist/jquery.js"></script>
    <script src="../../node_modules/jquery-colorbox/jquery.colorbox.js"></script>
    <script src="../../node_modules/swipebox/src/js/jquery.swipebox.min.js"></script>
    <script src="../../dist/js/jquery.justifiedGallery.js"></script>
    <!-- endbower -->
    <script>
    $("#bigimages").justifiedGallery({
        rowHeight: 1000,
        waitThumbnailsLoad: false,
        sizeRangeSuffixes: {
            'lt100': '_t',
            'lt500': '',
            'lt1024': '_b'
        },
    });
    </script>
</body>

</html>
